<template>
  <div class="empl">

    <div class="forum-box">
      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/hdxx.png" alt="">
          <div>
            <h3>活动消息</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <!--<img src="../../../static/images/luntan/zhishi.png" alt="">-->
        </div>
      </div>

      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/tongzhi.png" alt="">
          <div>
            <h3>通知</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <!--<img src="../../../static/images/luntan/zhishi.png" alt="">-->
        </div>
      </div>

      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/guanzhu.png" alt="">
          <div>
            <h3>我的关注</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <!--<img src="../../../static/images/luntan/zhishi.png" alt="">-->
        </div>
      </div>

      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/zstx.png" alt="">
          <div>
            <h3>旺仔小花生</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <img src="../../../static/images/luntan/zhishi.png" alt="">
        </div>
      </div>

      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/zstx.png" alt="">
          <div>
            <h3>旺仔小花生</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <img src="../../../static/images/luntan/zhishi.png" alt="">
        </div>
      </div>

      <div class="forum-list">
        <div class="forum-list-fl">
          <img src="../../../static/images/luntan/zstx.png" alt="">
          <div>
            <h3>旺仔小花生</h3>
            <p class="forum-content">这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好,这个古钱币，评上很好</p>
            <p>刚刚</p>
          </div>
        </div>
        <div class="forum-list-rt">
          <img src="../../../static/images/luntan/zhishi.png" alt="">
        </div>
      </div>



    </div>



    <footer-vue></footer-vue>
  </div>
</template>

<script>
  import {getUser} from '../../assets/js/tools';
  import {ipconfig} from "../../assets/js/ipconfig";

  export default {
    name: "forum",
    data(){
      return {
        serveraddress: ipconfig.wsUrl,//服务器地址
        userId:null,
        websock:null,
        productinfos:null,
      }
    },
    created(){
      let user = getUser();
      this.userId = user.id;
      if (!window.WebSocket) {
        console.log("您的浏览器不支持ws");
        return false;
      }
      this.initWebpack();

    },
    methods:{
      initWebpack(){//初始化websocket
        this.websock = new WebSocket(this.serveraddress+"/"+this.userId);
        this.websock.onopen = this.websocketopen;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onerror = this.websocketerror;
      },
      websocketopen(){//打开
        console.log("WebSocket连接成功")
      },
      websocketonmessage(e){ //数据接收
        console.log(e);
        this.productinfos = JSON.parse(e.data);
      },
      websocketclose(){  //关闭
        console.log("WebSocket关闭");
      },
      websocketerror(){  //失败
        console.log("WebSocket连接失败");
      },
    }
  }
</script>

<style scoped>
  .forum-list{
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    align-items: center;
    border-bottom: 1px solid #cccccc;
  }
  .forum-box .forum-list:last-child{
    border-bottom: none;
  }
  .forum-list-fl{
    display: flex;
    justify-content: space-between;
  }
  .forum-list-fl p{
    color: #999999;
    font-size: 0.6rem;
  }
  .forum-list-fl img{
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
  }
  .forum-content{
    width: 10rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .forum-list-rt{
    width: 55px;
    height: 55px;
  }
  .forum-list-rt img{
    width: 100%;
  }
</style>
